<template>
  <div class="fixed bottom-0 left-0 z-99 h-full w-full">
    <div class="bgcity h-full w-full" @click="changeisCity" />
    <div class="fixed bottom-0 h-808rpx w-full bg-hex-fff">
      <div class="w-full py-25rpx text-center text-30rpx font-500 text-hex-333">定位城市</div>
      <div class="flex items-center justify-between bg-hex-FFF0E8 px-28rpx py-12rpx">
        <div class="flex items-center">
          <image :src="`${cdnUrl}/imgs/shop/cityIcon.png${imgVersion}`" class="h-27rpx w-27rpx" />
          <div class="ml-16rpx text-26rpx font-400 text-hex-E86825">定位当前城市</div>
        </div>
        <div class="rounded-full bg-hex-E86825 px-40rpx py-5rpx text-26rpx font-400 text-hex-fff">定位</div>
      </div>
      <div class="px-28rpx">
        <div class="mt-25rpx flex items-center border-2rpx border-hex-f5f5f5 border-b-solid">
          <div class="w-1/3 flex flex-col items-center text-center">
            <div class="pb-12rpx text-30rpx font-500 text-hex-333" :class="{ 'text-hex-7C8699': province }">
              选择省份</div>
            <div class="h-2rpx w-115rpx" :class="{ 'bg-hex-37A47F': !province }" />
          </div>
          <div class="w-1/3 flex flex-col items-center text-center">
            <div class="pb-12rpx text-30rpx font-500" :class="province ? 'text-hex-333' : 'text-hex-7C8699'">
              选择城市
            </div>
            <div class="h-2rpx w-115rpx" :class="{ 'bg-hex-37A47F': province }" />
          </div>
          <div v-if="province" class="w-1/3 flex flex-col items-center text-center">
            <div class="pb-12rpx text-30rpx font-500 text-hex-333">选择区域</div>
            <div class="h-2rpx w-115rpx" />
          </div>
        </div>
        <div class="flex">
          <div class="z-999 h-570rpx w-1/3 overflow-hidden overflow-y-auto text-center">
            <div v-for="(item, index) in city"
                 :key="index" class="py-24rpx text-30rpx font-500"
                 :class="province === item ? 'text-hex-333' : 'text-hex-7C8699'" @click="changeProvince(item)">{{ item }}</div>
          </div>
          <div class="w-1/3 py-24rpx text-center">1{{ isCity }}</div>
          <div v-if="province" class="w-1/3 py-24rpx text-center">1</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  isCity: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['changeisCity'])
// import {defineProps} from 'vue'
const city = ['河北', '山西', '黑龙江', '吉林', '辽宁', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北']
let province: any = $ref('') //省份
let cityIndex: any = $ref('') // 城市
const changeProvince = (value) => {
  province = value
}

const changeisCity = () => {
  emits('changeisCity', false)
}
</script>

<style lang="scss" scoped>
.bgcity {
  background-color: rgb(0 0 0 / 60%);
}
</style>
